<template>
  <div class="backStack-issue-wrap">
    <div v-for="(item, index) in formInfoList" :key="index" class="mapStatis">
      <TitleCard
        :title="item.title"
        :showMore="showMore"
        :type="'firstCard'"
        v-if="item.title"
      >
      </TitleCard>
      <div v-else class="allTown">
        <span>全市数据标题：</span>
        <span class="allTown-title">{{ title }}</span>
      </div>
      <UserInfos ref="userInfos" :infos="item.formInfo"></UserInfos>
    </div>
  </div>
</template>

<script>
import UserInfos from '../../components/userInfos/index.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { formInfoList } from './configs/formOptions.js'
import { getMapStatisticsDetail } from '@/api/mapStatistics.js'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      loading: true,
      formInfoList,
      title: '',
      cityList: ['南海区', '三水区', '禅城区', '顺德区', '高明区']
    }
  },
  components: {
    UserInfos
  },
  created() {
    this.initSetting()  // 初始化默认配置
  },
  methods: {
    // 初始化数据
    async initSetting() {
      const { batch_id } = this.$route.query
      const { data } = await getMapStatisticsDetail(batch_id)
      this.dealInfo('formInfoList', data)
    },
    // 处理静态信息
    dealInfo(type, result) {
      if (!result) return
      result.forEach(item => {
        if (this.cityList.indexOf(item.cityTilte) === -1) {  //针对全市的数据title设置，因为返回值没有可以映射该表
          this.title = item.cityTilte
          this[type].forEach(ele => {
            const { formInfo } = ele
            formInfo.forEach(i => {
              const { key } = i
              const v = item[key] || '-'
              i.value = v
            })
          })
        }
        this[type].forEach(ele => { //通过五个城市名字映射对应取值
          if (item.cityTilte === ele.type) {
            const { formInfo } = ele
            formInfo.forEach(i => {
              const { key } = i
              const v = item[key] || '-'
              i.value = v
            })
          }
        })
      })
    },
  }
}
</script>
